<template>
	<view>
		<!-- 回答详情 -->
		<view class="discuss_box">
			<p class="topic">话题：{{discuss.topic}}</p>
		</view>

		<view class="bg_clr">
			<!-- 回答 -->
			<view class="answer_box">
				<p class="name_box">
					<span class="name">{{answer.name}}</span>
				</p>
				<p class="content">{{answer.content}}</p>
				<p class="p_flex">
					<span class="thumb">
						<u-icon class="icon" name="thumb-up"></u-icon>
						{{answer.thumb}}
					</span>
					<!-- <span class="date">回答创建于{{answer.date}}</span> -->
				</p>
			</view>

			<!--  -->
			<view class="answer_box">
				<p class="name_box">
					<span class="name">评论</span>
				</p>
				<view v-for="item in answerdis" :key="item.id" class="dis_con_box">
					<p class="p_flex mar_t">
						<span class="thumb">{{item.name}}</span>
						<span class="date">{{item.date.slice(0,10)}}</span>
					</p>
					<p class="content pad_0">{{item.content}}</p>
					<p class="p_flex mar_t">
						<span class="thumb">
							<u-icon @click="zan(item)" class="icon" name="thumb-up"></u-icon>
							{{item.thumb}}
						</span>
						<!-- <span class="date">回复</span> -->
					</p>
				</view>
			</view>

		</view>

		<!-- 评论 -->
		<view class="release_box">
			<u--input v-model="value" placeholder="" border="none"></u--input>
			<!-- <u--input placeholder="回复赵二小姐：" border="none"></u--input> -->
			<p @click="release" class="release_btn">评论</p>
		</view>
	</view>
</template>

<script>
	import shijianc from '@/pages/Home/time.js'
	export default {
		data() {
			return {
				answer: {},
				answerdis: [],
				value: '',
				discuss:{},
				ids:'',
			}
		},
		onLoad(option) {
			this.ids = option.id
			this.$api.searchAnswer({
				id: this.ids
			}).then(res => {
				this.answer = res.data
				console.log(this.answer)

			})
			// 回答评论
			this.$api.lfyanswerdis().then((res) => {
				console.log(res)
				// this.answerdis = res.data
				this.answerdis = res.data
			})
			
			
			this.ids = option.id
			this.$api.searchDiscuss({
					id: this.ids
				}).then(res => {
					this.discuss = res.data
					console.log(this.discuss)
			
				})

		},

		methods: {
			// 评论
			release() {
				console.log(this.value)
				let a = {
					name: '王五',
					thumb: '200',
					// date:'',
					content: this.value,
				}
				this.$api.lfyAddAnsdis(a).then(res => {

					this.$api.lfyanswerdis().then((res) => {
						console.log(res)
						this.answerdis = res.data
						
					})
				})

			},
			
			// 评论点赞
			zan(item) {
				console.log(item)
				if (item.zan == '0') {
					item.zan = 1
					item.thumb = Number(item.thumb) + 1
					this.$api.upThumbDis({
						id: item.id,
						zan: item.zan,
						thumb: item.thumb,
					}).then(res => {
						console.log("+")
					})
				} else {
					item.zan = 0
					item.thumb = Number(item.thumb) - 1
					this.$api.upThumbDis({
						id: item.id,
						zan: item.zan,
						thumb: item.thumb
					}).then(res => {
						console.log('-')
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	// 
	.discuss_box {
		background-color: #fafafa;
		// border-bottom: 2upx solid #cbcbcb;
		padding: 10upx 30upx;

		p {
			height: 80upx;
			line-height: 80upx;
		}


	}

	// 
	.bg_clr {
		background-color: #f0f0f0;
		padding: 20upx 0 100upx;
	}

	// 
	// 	回答
	.answer_box {
		padding: 20upx 30upx;
		margin-bottom: 20upx;
		background-color: #fafafa;

		.name_box {
			height: 60upx;
			line-height: 60upx;
			border-bottom: 2upx solid #cbcbcb;

			.name {
				color: #171717;
				font-size: 28upx;
			}
		}

		.dis_con_box {
			border-bottom: 2upx solid #cbcbcb;
		}

		.p_flex {
			display: flex;
			justify-content: space-between;
			height: 60upx;
			line-height: 60upx;
			margin-top: 40upx;


			.date {
				color: #646464;
				font-size: 24upx;
			}

			.thumb {
				color: #646464;
				font-size: 24upx;
			}

			.chat {
				color: #646464;
				font-size: 24upx;
			}

			span {
				.icon {
					float: left;
					// vertical-align: middle;
					margin-top: 12upx;
					margin-right: 10upx;
				}
			}
		}

		.content {
			font-size: 24upx;
			color: #323232;
			padding: 20upx 0;
		}

		.mar_t {
			margin-top: 20upx;
		}

		.pad_0 {
			padding: 0;
		}
	}


	// 评论
	.release_box {
		display: flex;
		background-color: #e0e0e0;
		padding: 10upx 0 10upx 30upx;
		height: 60upx;
		line-height: 60upx;
		position: fixed;
		bottom: 0;
		width: 100%;

		/deep/ .u-input--square {
			background-color: #fff;
			height: 60upx;
			line-height: 60upx;
			text-indent: 10upx;
		}

		.release_btn {
			color: #8fc31f;
			font-size: 34upx;
			padding: 0 50upx;
		}
	}
</style>
